<template>
	<view class="plan">
		<view style="width: 90%;
		margin: auto">
			<view style="display: flex;">
				<u--input border="bottom" placeholder="请输入方案名称"></u--input>
				<u-icon name="close" @click="removeSelf"></u-icon>
			</view>
			<view class="money" style="display: flex;">
				<text style="font-size: 36rpx;color:#ddd;font-weight: 550;">¥</text>
				<u--input border="none" placeholderStyle='font-size: 36rpx;color:#666;font-weight: 550;'
					placeholder=" 00.00"></u--input>
				<text>/ 月</text>
				<text style="font-size: 27rpx;margin-left: 20rpx;">最低¥5.00</text>
			</view>
		</view>
		<view class="particulars">
			<textarea placeholder-style="color:#ddd;padding:15rpx;" placeholder="奖励详情"></textarea>
		</view>
		<button style="background: white;color: #999;width: 90%;margin: 35rpx auto;">+添加赞助奖励</button>
		<view class="addImg">
			<button>添加方案图片</button>
			<text>推荐比例：正方形</text>
		</view>
		<view style="width: 90%;margin: auto;">
			<view style="color: #666;border-bottom: 1px #ddd solid;">
				<view @click="toggleAdvancedOptions" style="display: flex;">
					<u-icon :name="icon"></u-icon>
					<text style="margin-left: 15rpx;">高级选项</text>
				</view>
			</view>
			<view v-if="show">
				<view style="display: flex;">
					<checkbox-group>
						<checkbox value="cb" />
					</checkbox-group>
					<view>
						<text>
							<text style="color: #666;">独立方案</text>(与其他方案无升级关系,保存后不可更改)
						</text>
					</view>
				</view>
				<view>
					<text style="font-weight: 1200;color: #000;font-size: 32rpx;">月付、完结付</text>
					<u-radio-group>
						<u-radio size="20" iconSize='18' activeColor="red" shape="circle" label="按月支付"
							:name="1"></u-radio>
							<u-radio size="20" iconSize='18' activeColor="red" shape="circle" label="按季度支付"
								:name="2"></u-radio>
						<u-radio size="20" style="margin:0 10rpx;" iconSize='18' activeColor="red" shape="circle"
							label="按完结支付" :name="3"></u-radio>
					</u-radio-group>
				</view>
				<view class="exchange">
					<view class="exchanges-name">
						<text>兑换链接</text>
						<text>生成</text>
					</view>
					<view class="exchanges-number">
						<text style="margin-right: 50rpx;">已兑换 <text style="color: #ff6600;font-size: 30rpx;margin: 0 10rpx;font-weight: 666;">{{exchanges}}</text>  人</text>
						<text>未兑换 
						<text style="color: #ff6600;font-size: 30rpx;margin: 0 10rpx;font-weight: 666;">{{noExchange}}</text> 
						人</text>
					</view>
				</view>
			</view>
		</view>
		<button style="width: 90%;margin: 38rpx auto;">保存</button>
	</view>
</template>

<script>
	export default {
		props: {
			index: { // 接收父组件传递的索引值
				type: Number,
				required: true,
			
			}
		},
		data() {
			return {
				show: false,
				icon: 'arrow-down',
				exchanges:0,
				noExchange:0,
			}
		},
		methods: {
			toggleAdvancedOptions() {
				// 切换show的值
				this.show = !this.show;
				// 根据show的值改变icon的名称
				this.icon = this.show ? 'arrow-up' : 'arrow-down';
			},
			removeSelf() {
				uni.showModal({
					title: '确认删除',
					content: '您确定要删除这个方案吗？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确定按钮
							this.$emit('remove', this.index);
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户取消了删除');
						}
					}
				});
			}
		}
	}
</script>

<style>
	.plan {
		width: 100%;
		background-color: #fff;
		line-height: 100rpx;
		border: 1px #ddd solid;
		margin: 20rpx 0;
		color: #d2d2d2;
	}

	button {
		background-color: #ff6600;
		color: #fffddd;
	}

	.particulars textarea {
		width: 90%;
		margin: auto;
		border: 1px solid #ddd;
		height: 200rpx;
	}

	.addImg button {
		width: 270rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 0rpx;
		/* 将按钮推到最左边 */
	}

	.addImg {
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		/* 分布在左右两侧 */
		align-items: center;
		/* 垂直居中对齐 */
	}
	.exchanges-name{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000;
	}
	.exchanges-number >text{
		border: #d7d5bb 1px solid;
		padding: 7rpx;
		font-size: 26rpx;
	}
</style>